<template>
    <div class="box">
        <div class="top">
            <div class="name">{{ companyname }}</div>
            <div class="person">联系人：{{ lxr }}</div>
            <div class="person">电&ensp;话 ：{{ sj }}</div>
            <div class="tag">
                <div class="tagitem1" v-if="zykh === 1">重要客户</div>
                <div class="tagitem2" v-if="ykh === 1">已开户</div>
            </div>
        </div>
        <div class="detailbox">
            <div class="detailmsgbox">
                <div class="title">客户详情</div>
                <div class="boxitem">
                    <div class="lable">公司名称：</div>
                    <div class="lablecontent">{{ companyname }}</div>
                </div>
                <div class="boxitem">
                    <div class="lable">联系人：</div>
                    <div class="lablecontent">{{ lxr }}</div>
                </div>
                <div class="boxitem">
                    <div class="lable">客户来源：</div>
                    <div class="lablecontent" v-show="khly === 0">电联</div>
                    <div class="lablecontent" v-show="khly === 1">地推</div>
                    <div class="lablecontent" v-show="khly === 2">陌拜</div>
                    <div class="lablecontent" v-show="khly === 3">微信</div>
                    <div class="lablecontent" v-show="khly === 4">转介绍</div>
                    <div class="lablecontent" v-show="khly === 5">其他</div>
                </div>
                <div class="boxitem">
                    <div class="lable">客户等级：</div>
                    <div class="lablecontent" v-show="khdj === 0">不重要</div>
                    <div class="lablecontent" v-show="khdj === 1">重要</div>
                </div>
                <!-- <div class="boxitem">
                    <div class="lable">手机：</div>
                    <div class="lablecontent">{{ sj }}</div>
                </div> -->
                <div class="boxitem">
                    <div class="lable">地址：</div>
                    <div class="lablecontent">{{ address }}</div>
                </div>
                <div class="boxitem">
                    <div class="lable">备注：</div>
                    <div class="lablecontent">{{ remark === null ? '--' : remark }}</div>
                </div>
            </div>
        </div>
        <div class="footerbox">
            <div style="display: flex;flex: 1;align-items: center;justify-content: space-around;">
                <div @click="del" style="display: flex;align-items: center;justify-content: center;flex-direction:column;">
                    <div><img class="img" src="../../static/容器.png" alt=""></div>
                    <div>删除</div>
                </div>
                <div @click="edit" style="display: flex;align-items: center;justify-content: center;flex-direction:column;">
                    <div><img class="img" src="../../static/编辑.png" alt=""></div>
                    <div>编辑</div>
                </div>
            </div>
            <div @click="call" style="flex: 1;height:90rpx;background-color: #3E5FF5;border-radius: 16rpx;color: #ffffff;text-align: center;font-size: 32rpx;line-height: 90rpx;">呼叫</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
import { getpotentialclientsapi, deldeletecontactsapi } from '../../api/contact';
const call = () => {
    uni.makePhoneCall({
        phoneNumber: sj.value
    })
}
const edit = () => {
    console.log('编辑')
    uni.navigateTo({
        url: '/pages/new-contacts/new-contacts?isadd=' + false + '&id=' + cid.value
        // url: `/pages/new-contacts/new-contacts?isadd=${false}?id=${cid.value}`
    })
}
const del = () => {
    deldeletecontactsapi({ id: cid.value }).then((res: any) => {
        console.log(res)
        if (res) {
            uni.showModal({
                title: '操作确认',
                content: '删除后数据消失，并无法恢复，确认删除？',
                success: async (res: any) => {
                    if (res.confirm) {
                        uni.showToast({
                            icon: 'none',
                            title: '删除成功',
                            mask: true
                        })
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            })
                        }, 500)
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            })
        }
    })
}

let id = ref('')
onLoad((options: any) => {
    console.log(options, 'optionsoptionsoptions');
    id.value = options.id
})

onShow(() => {
    console.log(11111111111111);
    getpotentialclients(Number(id.value))
})
const getpotentialclients = (id: any) => {
    getpotentialclientsapi(id).then((res: any) => {
        console.log(res, 'resdfersrersertsr')
        companyname.value = res.companyName
        lxr.value = res.customName
        zykh.value = res.isSignificance
        ykh.value = res.isOpen
        khly.value = res.customerAcquisitionChannel
        khdj.value = res.isSignificance
        sj.value = res.phone
        address.value = res.address
        remark.value = res.remark
        cid.value = res.id
    })
}
const cid = ref(0)
const companyname = ref('')
const lxr = ref('')
const zykh = ref<any>(null)
const ykh = ref<any>(null)
const khly = ref<any>(null)
const khdj = ref<any>(null)
const sj = ref('')
const address = ref('')
const remark = ref('')
</script>

<style lang="scss" scoped>
.footerbox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 120rpx;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 38rpx;
    justify-content: space-around;
    color: #565868;
    font-size: 32rpx;
    .img{
        width: 33rpx;
        height: 33rpx;
    }
}

.box {
    width: 100%;
    box-sizing: border-box;
    height: 100vh;
    background-color: #fafafc;
}

.top {
    background: linear-gradient(180deg, #e3f0fc 0%, #D8F2F9 44%, rgba(208, 238, 251, 0.00) 100%);
    width: 100%;
    box-sizing: border-box;
    padding: 53rpx 30rpx;
    height: 400rpx;

    .name {
        font-size: 36rpx;
        font-weight: 700;
        margin-bottom: 16rpx;
    }

    .person {
        font-size: 28rpx;
        margin-bottom: 24rpx;
    }

    .tag {
        display: flex;
        align-items: center;

        .tagitem1 {
            min-width: 100rpx;
            height: 50rpx;
            background-color: #FFFFFF;
            border: 2px solid rgba(255, 118, 66, 0.3);
            font-size: 24rpx;
            color: #FF7642;
            text-align: center;
            margin-right: 17rpx;
            padding: 13rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-radius: 8rpx;
        }

        .tagitem2 {
            display: flex;
            align-items: center;
            border-radius: 8rpx;
            padding: 13rpx;
            min-width: 100rpx;
            box-sizing: border-box;
            height: 50rpx;
            background-color: #FFFFFF;
            border: 2px solid rgba(0, 214, 121, 0.3);
            font-size: 24rpx;
            color: #00D679;
            text-align: center;
            margin-right: 17rpx;
        }
    }
}

.detailbox {
    width: 100%;
    margin-top: -110rpx;
    box-sizing: border-box;
    padding: 0 30rpx;

    .title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 32rpx;
    }

    .detailmsgbox {
        background-color: #ffffff;
        border-radius: 16rpx;
        margin-top: 26rpx;
        box-sizing: border-box;
        padding: 30rpx;
        font-size: 28rpx;

        .boxitem {
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .lable {
            color: #9497B1;
        }

        .lablecontent {
            color: #202536;
        }
    }
}
</style>